<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工保密协议</title>
    <link href="../css/all.min.css" rel="stylesheet">
    <script src="../js/signature_pad.umd.min.js"></script>
    <style>
        body {
            background-color: #f4f4f5;
            font-family: "SimSun", sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

       .a4-container {
            width: 210mm;
            min-height: 297mm;
            padding: 32px;
            background-color: #fff;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border-radius: 8px;
            position: relative;
            box-sizing: border-box;
        }

       .title {
            font-size: 22px;
            font-weight: bold;
            text-align: center;
            color: #000;
            margin-bottom: 24px;
        }

       .content-text {
            color: #000;
            line-height: 1.75;
            margin-bottom: 16px;
            text-indent: 2em;
        }

       .rule-list {
            list-style-type: decimal;
            padding-left: 24px;
            color: #000;
            line-height: 1.75;
            margin-bottom: 32px;
        }

       .underline-text {
            border-bottom: 1px solid #9ca3af;
            padding: 0 8px;
            cursor: pointer;
        }

       .print-button {
            position: fixed;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            padding: 10px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

       .print-button:hover {
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }

       .signature-section {
            text-align: right;
            margin-top: 50px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

       .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            justify-content: center;
            align-items: center;
        }

       .modal-content {
            background: linear-gradient(135deg, #f9f9f9, #e6e6e6);
            padding: 30px;
            border: 1px solid #888;
            width: 400px;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            text-align: center;
            animation: fadeIn 0.3s ease-out;
        }

       .close {
            color: #aaa;
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 28px;
            font-weight: bold;
        }

       .close:hover,
       .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

       .signature-pad {
            border: 1px solid #ccc;
            margin: 20px auto;
            border-radius: 5px;
            display: block;
        }

       .modal-button {
            padding: 12px 25px;
            margin: 0 10px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-size: 16px;
        }

       .modal-button.save {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

       .modal-button.save:hover {
             background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }

       .modal-button.clear {
            background: linear-gradient(135deg, #9ca3af 0%, #6f6c6c 100%);
            color: white;
        }

       .modal-button.clear:hover {
            background: linear-gradient(135deg, #6f6c6c 0%, #9ca3af 100%);
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media print {
            body {
                background-color: transparent;
            }

           .a4-container {
                box-shadow: none;
                border-radius: 0;
                width: 210mm;
                min-height: 297mm;
                margin: 0;
                padding: 32px;
                page-break-after: avoid;
            }

           .print-button {
                display: none;
            }

           .modal {
                display: none !important;
            }
        }

       .editable {
            border-bottom: 1px solid #000;
            outline: none;
            display: inline-block;
            text-indent: 0px;
        }
    </style>
</head>

<body>
    <div class="a4-container">
        <h1 class="title">员工保密协议</h1>
        <p class="content-text">本《员工保密协议》（以下简称“本协议”）由 <span class="editable" contenteditable="true" data-default="[公司全称]">[公司全称]</span>（以下简称“甲方”）与 <span class="editable" contenteditable="true" data-default="[员工姓名]">[员工姓名]</span>（身份证号：<span class="editable" contenteditable="true" data-default="[身份证号]">[身份证号]</span>）（以下简称“乙方”）于 <span class="editable" contenteditable="true" data-default="[协议签订日期]">[协议签订日期]</span> 共同签订。鉴于乙方在受雇于甲方期间，可能会接触、知悉甲方的商业秘密、技术秘密、客户信息等各类保密信息，为保护甲方的合法权益和商业利益，维护市场竞争秩序，根据《中华人民共和国合同法》《中华人民共和国反不正当竞争法》等相关法律法规的规定，甲乙双方经平等、自愿、充分协商，达成如下协议条款，以资共同遵守：</p>
        <ol class="rule-list">
            <li><strong>保密信息的定义与范围</strong>
                <ol type="a">
                    <li>本协议所指的保密信息是指甲方拥有或控制的、不为公众所知悉的、具有商业价值并经甲方采取合理保密措施的所有信息，包括但不限于以下方面：
                        <ul>
                            <li>技术信息：包括但不限于产品设计方案、研发成果、技术文档、工艺流程、算法、源代码、数据库等。</li>
                            <li>商业信息：包括但不限于客户名单、销售渠道、市场推广策略、定价政策、财务数据、商业计划、招投标信息等。</li>
                            <li>管理信息：包括但不限于公司内部管理制度、人力资源信息、运营数据、战略规划等。</li>
                        </ul>
                    </li>
                    <li>无论上述信息是以书面、电子、口头或其他任何形式存在，均属于保密信息的范畴。</li>
                </ol>
            </li>
            <li><strong>保密义务</strong>
                <ol type="a">
                    <li>乙方在受雇于甲方期间及自离职之日起 <span class="editable" contenteditable="true" data-default="[保密期限]">[保密期限]</span> 年内，应对保密信息严格保密，不得向任何第三方（包括但不限于甲方的竞争对手、合作伙伴、客户等）披露、泄露或允许其使用保密信息。</li>
                    <li>未经甲方书面同意，乙方不得将保密信息用于非甲方业务目的，不得自行使用或允许他人使用保密信息进行与甲方有竞争关系的业务活动。</li>
                    <li>乙方应采取合理的保密措施，确保保密信息的安全，如限制知悉范围、设置访问权限、加密存储等。</li>
                    <li>若因工作需要向第三方披露保密信息，乙方应事先获得甲方的书面授权，并要求该第三方签署保密协议，承担与乙方同等的保密义务。</li>
                </ol>
            </li>
            <li><strong>信息使用限制</strong>
                <ol type="a">
                    <li>乙方仅可在履行工作职责所需的范围内使用保密信息，不得超出该范围使用或传播保密信息。</li>
                    <li>在使用保密信息时，乙方应遵循甲方的相关规定和流程，确保信息的合法、合规使用。</li>
                </ol>
            </li>
            <li><strong>返还与销毁</strong>
                <ol type="a">
                    <li>在乙方离职或甲方要求时，乙方应立即将所有包含保密信息的载体（包括但不限于文件、资料、磁盘、光盘、电子设备等）返还给甲方，并销毁所有复制件和摘要。</li>
                    <li>乙方应向甲方出具书面声明，确认已返还所有保密信息载体，并销毁所有复制件和摘要。</li>
                </ol>
            </li>
            <li><strong>违约责任</strong>
                <ol type="a">
                    <li>若乙方违反本协议的任何条款，应承担相应的违约责任，包括但不限于赔偿甲方因此遭受的全部损失，该损失包括直接损失、间接损失、预期利益损失、调查费用、律师费用等。</li>
                    <li>甲方有权要求乙方立即停止违约行为，并采取措施消除因违约行为造成的影响。</li>
                    <li>若乙方的违约行为构成犯罪，甲方有权依法追究乙方的刑事责任。</li>
                </ol>
            </li>
            <li><strong>协议的生效与终止</strong>
                <ol type="a">
                    <li>本协议自双方签字（或盖章）之日起生效。</li>
                    <li>本协议的保密期限为自乙方知悉保密信息之日起 <span class="editable" contenteditable="true" data-default="[保密期限]">[保密期限]</span> 年。在保密期限内，若保密信息因合法原因成为公开信息，则乙方的保密义务自动终止。</li>
                </ol>
            </li>
            <li><strong>争议解决</strong>
                <ol type="a">
                    <li>如双方在本协议履行过程中发生争议，应首先通过友好协商解决；协商不成的，任何一方均有权向有管辖权的人民法院提起诉讼。</li>
                    <li>在争议解决期间，除争议事项外，双方应继续履行本协议的其他条款。</li>
                </ol>
            </li>
        </ol>
        <p class="content-text">本协议一式两份，甲乙双方各执一份，具有同等法律效力。</p>
        <div class="signature-section">
            <p class="content-text">员工签字：<span id="signature-line" class="underline-text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
            <p class="content-text">签字日期：<span id="current-date" class="editable" contenteditable="true" data-default="[签字日期]">[签字日期]</span></p>
        </div>
    </div>
    <button class="print-button" onclick="window.print()">打印</button>

    <!-- 签字模态框 -->
    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>签字确认</h2>
            <canvas id="signature-pad" class="signature-pad" width="350" height="150"></canvas>
            <button class="modal-button save" onclick="saveSignature()">保存签名</button>
            <button class="modal-button clear" onclick="clearSignature()">清除签名</button>
        </div>
    </div>

    <script>
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = String(currentDate.getMonth() + 1).padStart(2, '0');
        const day = String(currentDate.getDate()).padStart(2, '0');
        document.getElementById('current-date').textContent = `${year}年${month}月${day}日`;

        const signatureLine = document.getElementById('signature-line');
        const modal = document.getElementById('myModal');
        const closeBtn = document.querySelector('.close');
        const canvas = document.getElementById('signature-pad');
        const signaturePad = new SignaturePad(canvas);

        signatureLine.addEventListener('click', function () {
            modal.style.display = 'flex';
        });

        closeBtn.addEventListener('click', function () {
            modal.style.display = 'none';
        });

        window.addEventListener('click', function (event) {
            if (event.target === modal) {
                modal.style.display = 'none';
            }
        });

        function saveSignature() {
            const data = signaturePad.toDataURL();
            const img = new Image();
            img.src = data;
            img.style.width = '200px';
            img.style.verticalAlign = 'middle';
            signatureLine.innerHTML = '';
            signatureLine.appendChild(img);
            modal.style.display = 'none';
        }

        function clearSignature() {
            signaturePad.clear();
        }

        const editableElements = document.querySelectorAll('.editable');
        editableElements.forEach(element => {
            element.addEventListener('focus', function () {
                setTimeout(() => {
                    if (this.textContent === this.dataset.default) {
                        this.textContent = '';
                        this.style.color = '#000';
                    }
                }, 0);
            });
            element.addEventListener('blur', function () {
                if (this.textContent === '') {
                    this.textContent = this.dataset.default;
                    this.style.color = '#777';
                }
            });
        });
    </script>
</body>

</html>
    